<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div
    class="h-screen transition-colors duration-300 bg-gradient-to-br from-blue-50 to-blue-100"
  >
    <!-- 左侧菜单 -->
    <div
      :class="[
        'fixed left-0 top-0 h-screen backdrop-blur-lg transition-all duration-300 ease-in-out z-10 bg-white/90',
        isCollapsed ? 'w-16' : 'w-60',
      ]"
    >
      <!-- Logo -->
      <div
        class="h-16 flex items-center justify-center border-b transition-colors duration-300 border-gray-200"
      >
        <SvgIcon class="fa" :name="'layOut/SVG-15'" />
        <span
          :class="[
            'ml-3 font-semibold overflow-hidden whitespace-nowrap transition-colors duration-300 text-gray-900',
            isCollapsed
              ? 'w-0 opacity-0'
              : 'w-auto opacity-100 transition-all duration-300 delay-200',
          ]"
        >
          博客后台管理系统
        </span>
      </div>
      <!-- 菜单列表 -->
      <div class="py-4 h-[calc(100vh-4rem-4rem)] overflow-y-auto">
        <div v-for="(item, index) in menuItems" :key="index" class="relative">
          <!-- 主菜单项 -->
          <div
            :class="[
              'flex items-center px-4 py-3 cursor-pointer transition-all duration-200 hover:bg-blue-500/10',
              activeMenu === item.key
                ? 'text-blue-500 bg-blue-500/10'
                : 'text-gray-400',
              isCollapsed ? 'justify-center' : 'justify-between',
            ]"
            @click="
              item.children ? toggleMenu(item.key) : handleMenuClick(item)
            "
            @mouseover="isCollapsed && (hoveredMenu = item.key)"
            @mouseleave="
              isCollapsed &&
                (() => {
                  if (
                    event.clientX >
                      event.target.getBoundingClientRect().right &&
                    event.clientX <
                      event.target.getBoundingClientRect().right + 200 &&
                    event.clientY >= event.target.getBoundingClientRect().top &&
                    event.clientY <= event.target.getBoundingClientRect().bottom
                  ) {
                    return;
                  }
                  setTimeout(() => {
                    const submenu = document.querySelector(
                      '.bg-gray-900\\/90.backdrop-blur-lg.rounded-lg'
                    );
                    if (!submenu || !submenu.matches(':hover')) {
                      hoveredMenu = null;
                    }
                  }, 100);
                })()
            "
          >
            <div class="flex items-center">
              <i
                :class="[
                  'text-xl transition-transform hover:scale-110',
                  item.icon,
                ]"
              ></i>
              <span
                :class="[
                  'ml-3 overflow-hidden whitespace-nowrap',
                  isCollapsed
                    ? 'w-0 opacity-0'
                    : 'w-auto opacity-100 transition-all duration-300 delay-200',
                ]"
              >
                {{ item.label }}
              </span>
            </div>
            <i
              v-if="item.children && !isCollapsed"
              :class="[
                'fas',
                expandedMenus.includes(item.key)
                  ? 'fa-chevron-down'
                  : 'fa-chevron-right',
                'text-xs transition-transform',
              ]"
            ></i>
          </div>
          <!-- 展开的子菜单 -->
          <div
            v-if="item.children"
            :class="[
              'overflow-hidden transition-all duration-300',
              !isCollapsed && expandedMenus.includes(item.key)
                ? 'max-h-screen'
                : 'max-h-0',
            ]"
          >
            <div
              v-for="child in item.children"
              :key="child.key"
              :class="[
                'flex items-center px-4 py-2 cursor-pointer transition-all duration-200 hover:bg-blue-500/10',
                activeMenu === child.key
                  ? 'text-blue-500 bg-blue-500/10'
                  : 'text-gray-400',
                isCollapsed ? 'hidden' : 'pl-12',
              ]"
              @click="handleMenuClick(child)"
            >
              {{ child.label }}
            </div>
          </div>
          <!-- 悬浮展示的子菜单 -->
          <div
            v-if="isCollapsed && item.children && hoveredMenu === item.key"
            class="absolute left-full top-0 ml-2 bg-gray-900/90 backdrop-blur-lg rounded-lg py-2 min-w-[160px] z-20 border border-gray-700"
            @mouseleave="hoveredMenu = null"
          >
            <div
              v-for="child in item.children"
              :key="child.key"
              class="px-4 py-2 cursor-pointer hover:bg-blue-500/10 text-gray-400 hover:text-blue-500"
              @click.stop="handleMenuClick(child)"
            >
              {{ child.label }}
            </div>
          </div>
        </div>
      </div>
      <!-- 底部按钮区 -->
      <div
        :class="[
          'absolute bottom-0 left-0 right-0 h-16 backdrop-blur-lg border-t transition-colors duration-300 flex items-center',
          isDark
            ? 'bg-gray-900/90 border-gray-800'
            : 'bg-white/90 border-gray-200',
        ]"
      >
        <!-- 主题切换按钮 -->
        <div
          class="absolute left-0 ml-4 cursor-pointer transition-colors duration-300 text-gray-600 hover:text-blue-500"
          @click="toggleTheme"
        >
          <i class="fas fa-moon"></i>
        </div>
        <!-- 收缩按钮 -->

        <div
          class="flex-1 flex justify-center cursor-pointer transition-colors duration-300 text-gray-600 hover:text-blue-500 bg-#000"
          @click="toggleCollapse"
        >
        
          <SvgIcon
            :class="['fas', isCollapsed ? 'fa-angle-right' : 'fa-angle-left']"
            :name="'login/SVG-11'"
          />

        </div>
      </div>
    </div>
    <!-- 右侧内容区域 -->
    <div
      :class="[
        'transition-all duration-300 h-screen',
        isCollapsed ? 'ml-16' : 'ml-60',
      ]"
    >
      <!-- 顶部标签栏 -->
      <div
        class="h-16 backdrop-blur-lg border-b px-4 flex items-center justify-between transition-colors duration-300 bg-white/90 border-gray-200"
      >
        <div class="flex-1 flex space-x-2 overflow-x-auto hide-scrollbar group">
          <div
            v-for="(tab, index) in tabs"
            :key="index"
            :class="[
              'px-4 py-2 rounded-lg flex items-center space-x-2 cursor-pointer transition-all duration-300 transform hover:scale-105',
              activeTab === tab.key
                ? 'bg-gradient-to-r from-blue-500/10 to-blue-500/20 text-blue-600 shadow-sm'
                : 'bg-gray-100/50 text-gray-500 hover:bg-gray-200/50',
            ]"
            @click="switchTab(tab)"
          >
            <i
              :class="[
                tab.icon,
                'transition-transform duration-300 transform group-hover:rotate-12',
              ]"
            ></i>
            <span class="transition-colors duration-300">{{ tab.label }}</span>
            <i
              class="fas fa-times ml-2 text-xs opacity-0 group-hover:opacity-100 hover:text-red-500 transition-all duration-300 transform hover:rotate-90"
              @click.stop="closeTab(index)"
              v-if="tab.closeable"
            ></i>
          </div>
        </div>
        <div class="flex items-center space-x-6 ml-4">
          <!-- 通知按钮 -->
          <div
            class="relative cursor-pointer text-gray-600 hover:text-blue-500 transition-colors duration-300"
          >
            <i class="fas fa-bell text-xl"></i>
            <div
              class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full flex items-center justify-center"
            >
              <span class="text-xs text-white">3</span>
            </div>
          </div>
          <!-- 全屏按钮 -->
          <div
            class="cursor-pointer text-gray-600 hover:text-blue-500 transition-colors duration-300"
          >
            <i class="fas fa-expand text-xl"></i>
          </div>
          <!-- 用户头像 -->
          <div class="flex items-center space-x-2 cursor-pointer group">
            <div class="w-8 h-8 rounded-lg overflow-hidden">
              <img
                src="https://ai-public.mastergo.com/ai/img_res/f76cc1f3d2da6f302ebbe55210188b89.jpg"
                class="w-full h-full object-cover"
                alt="用户头像"
              />
            </div>
            <div class="text-gray-700">
              <span class="text-sm font-medium">John Smith</span>
            </div>
            <i
              class="fas fa-chevron-down text-xs text-gray-400 group-hover:text-blue-500 transition-colors duration-300"
            ></i>
          </div>
        </div>
      </div>
      <!-- 内容区域 -->
      <div class="p-6 w-full h-[calc(100%-4rem)] overflow-auto">
        <!-- <router-view>
          <template #default="{ Component, route }">
            <keep-alive :include="cacheMeun.cacheMeunList">
              <Component :is="Component" />
            </keep-alive>
          </template>
        </router-view> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
// import { useCachMeun } from "@/store/cacheMeun";
// const cacheMeun = useCachMeun();
// 状态定义
const isDark = ref(false);
const isCollapsed = ref(false);
const activeMenu = ref("dashboard");
const activeTab = ref("dashboard");
const expandedMenus = ref([]);
const hoveredMenu = ref(null);
const visitChart = ref(null);
const articleChart = ref(null);
const visitChartRef = ref(null);
const articleChartRef = ref(null);

// 菜单数据
const menuItems = [
  { key: "dashboard", label: "仪表盘", icon: "fas fa-chart-line" },
  {
    key: "order",
    label: "订单管理",
    icon: "fas fa-shopping-cart",
    children: [
      { key: "order-list", label: "订单列表" },
      { key: "order-pending", label: "待处理订单" },
      { key: "order-return", label: "退货管理" },
    ],
  },
  {
    key: "product",
    label: "商品管理",
    icon: "fas fa-box",
    children: [
      { key: "product-list", label: "商品列表" },
      { key: "product-add", label: "添加商品" },
      { key: "product-category", label: "商品分类" },
    ],
  },
  {
    key: "customer",
    label: "客户管理",
    icon: "fas fa-user-friends",
    children: [
      { key: "customer-list", label: "客户列表" },
      { key: "customer-vip", label: "VIP 管理" },
    ],
  },
  {
    key: "marketing",
    label: "营销管理",
    icon: "fas fa-bullhorn",
    children: [
      { key: "marketing-campaign", label: "活动管理" },
      { key: "marketing-coupon", label: "优惠券" },
    ],
  },
  {
    key: "setting",
    label: "系统设置",
    icon: "fas fa-cog",
    children: [
      { key: "setting-profile", label: "个人设置" },
      { key: "setting-security", label: "安全设置" },
    ],
  },
];

const tabs = ref([
  {
    key: "dashboard",
    label: "仪表盘",
    icon: "fas fa-chart-line",
    closeable: false,
  },
]);

const statistics = [
  {
    label: "订单总数",
    value: "3,461",
    icon: "fas fa-shopping-cart",
    color: "text-blue-500",
  },
  {
    label: "客户总数",
    value: "16,236",
    icon: "fas fa-users",
    color: "text-green-500",
  },
  {
    label: "商品总数",
    value: "8,672",
    icon: "fas fa-box",
    color: "text-yellow-500",
  },
  {
    label: "销售额",
    value: "¥298,546",
    icon: "fas fa-dollar-sign",
    color: "text-purple-500",
  },
];

// 方法定义
const toggleTheme = () => {
  isDark.value = !isDark.value;
};

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
  expandedMenus.value = [];
};

const toggleMenu = (key) => {
  if (expandedMenus.value.includes(key)) {
    expandedMenus.value = expandedMenus.value.filter((k) => k !== key);
  } else {
    expandedMenus.value = [key];
  }
};

const handleMenuClick = (item) => {
  activeMenu.value = item.key;
  if (!tabs.value.find((tab) => tab.key === item.key)) {
    tabs.value.push({
      key: item.key,
      label: item.label,
      icon: item.icon,
      closeable: true,
    });
  }
  activeTab.value = item.key;

  const parentMenu = menuItems.find(
    (menuItem) =>
      menuItem.children &&
      menuItem.children.some((child) => child.key === item.key)
  );
  if (parentMenu) {
    expandedMenus.value = [parentMenu.key];
  } else {
    expandedMenus.value = [];
  }
};

const switchTab = (tab) => {
  activeTab.value = tab.key;
  activeMenu.value = tab.key;

  const parentMenu = menuItems.find(
    (menuItem) =>
      menuItem.children &&
      menuItem.children.some((child) => child.key === tab.key)
  );
  if (parentMenu) {
    expandedMenus.value = [parentMenu.key];
  } else {
    expandedMenus.value = [];
  }
};

const closeTab = (index) => {
  if (tabs.value[index].key === activeTab.value) {
    const tab = tabs.value[index - 1];
    activeTab.value = tab.key;
    activeMenu.value = tab.key;

    const parentMenu = menuItems.find(
      (menuItem) =>
        menuItem.children &&
        menuItem.children.some((child) => child.key === tab.key)
    );
    if (parentMenu) {
      expandedMenus.value = [parentMenu.key];
    } else {
      expandedMenus.value = [];
    }
  }
  tabs.value.splice(index, 1);
};

const initVisitChart = () => {
  if (visitChartRef.value) {
    visitChart.value = echarts.init(visitChartRef.value);
    const option = {
      animation: false,
      title: {
        text: "访问量统计",
        textStyle: {
          color: "#1f2937",
        },
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        axisLine: {
          lineStyle: {
            color: "#d1d5db",
          },
        },
        axisLabel: {
          color: "#4b5563",
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "#d1d5db",
          },
        },
        axisLabel: {
          color: "#4b5563",
        },
        splitLine: {
          lineStyle: {
            color: "#e5e7eb",
          },
        },
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: "line",
          smooth: true,
          itemStyle: {
            color: "#3b82f6",
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(59, 130, 246, 0.5)",
              },
              {
                offset: 1,
                color: "rgba(59, 130, 246, 0.1)",
              },
            ]),
          },
        },
      ],
    };
    visitChart.value.setOption(option);
  }
};

const initArticleChart = () => {
  if (articleChartRef.value) {
    articleChart.value = echarts.init(articleChartRef.value);
    const option = {
      animation: false,
      title: {
        text: "销售额分布",
        textStyle: {
          color: "#1f2937",
        },
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
        textStyle: {
          color: "#9ca3af",
        },
      },
      series: [
        {
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#ffffff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
              color: "#1f2937",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "电子产品" },
            { value: 735, name: "服装鞋帽" },
            { value: 580, name: "家居用品" },
            { value: 484, name: "食品饮料" },
            { value: 300, name: "其他" },
          ],
        },
      ],
    };
    articleChart.value.setOption(option);
  }
};

// 生命周期钩子
onMounted(() => {
  initVisitChart();
  initArticleChart();
});

// 监听主题变化
watch(isDark, () => {
  initVisitChart();
  initArticleChart();
});
</script>
<style scoped>
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
/* 自定义滚动条样式 */
.py-4::-webkit-scrollbar {
  width: 4px;
}
.py-4::-webkit-scrollbar-track {
  background: transparent;
}
.py-4::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}
.py-4::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
</style>
